<!-- 重新认证（非法人单位） -->
<template>
  <div>
    <ContainerTitle text="企业基本信息-重新认证"></ContainerTitle>
    <!-- <div class="titleDiv">
      <div>企业基本信息-重新认证</div>
    </div> -->
    <div class="msgDiv">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="经办人姓名：" class="UnitName" prop="handlerName">
          <el-input v-model="ruleForm.handlerName" placeholder="请输入经办人姓名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件类型：" class="Document" prop="handlerCertificatesType">
          <el-select v-model="ruleForm.handlerCertificatesType" placeholder="请选择证件类型">
            <el-option
              v-for="item in DocumentType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码：" prop="handlerCertificatesNumber">
          <el-input v-model="ruleForm.handlerCertificatesNumber" placeholder="请输入证件号码" maxlength="30" @input="ruleForm.handlerCertificatesNumber = ruleForm.handlerCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="经办人性别：" prop="handlerSex" class="Gender" style="display: flex;">
          <el-radio-group v-model="ruleForm.handlerSex" style="margin-left: 0px;">
            <el-radio
              v-for="item in sys_user_sex"
              :key="item.dictLabel"
              :label="item.dictValue"
            >{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="手机号：" prop="Cell_phone">
          <el-input v-model="ruleForm.Cell_phone" maxlength="11" placeholder="请输入内容"></el-input>
        </el-form-item>-->
        <el-form-item label="验证码：" class="Verification" prop="Verification_Code">
          <el-input v-model="ruleForm.Verification_Code" placeholder="请输入验证码"></el-input>
          <div class="Verification_Code">
            <img class="captchaImg" :src="captchaImage" @click="getCaptchaImage" />
          </div>
        </el-form-item>
        <!-- <el-form-item label="短信验证码：" class="Verification" prop="name">
          <el-input placeholder="请输入内容"></el-input>
          <el-button class="Verification_Code">发送验证码</el-button>
        </el-form-item>-->
        <el-form-item style="display: flex;">
          <Buttons :buttons="buttons" @resetForm="resetForm" @submitForm="submitForm"></Buttons>
          <!-- <el-button class="cancel" @click="submitForm('ruleForm')">取消</el-button>
          <el-button class="Submit" @click="resetForm('ruleForm')">提交</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Breadcrumb from '@/components/breadcrumb'

import { mapActions } from 'vuex'

import recerIllegalUnit from '@/formRules/userAccount/recerIllegalUnit.js'

import { getCaptchaImage } from '@/common/api.js'
import { getClueInfo, againAuthentication } from '@/common/api/company.js'

export default {
  mixins: [recerIllegalUnit],
  components: { Breadcrumb },
  data() {
    return {
      buttons: [
        { text: "取消", type: "normal", size: "l", method: "resetForm" },
        { text: "提交", type: "success", size: "l", method: "submitForm" }
      ],
      imgList: [],
      DocumentType: [], //证件类型
      sys_user_sex: [], //性别
      captchaImage: '',
      companyInfo: '',
      login: '',
      realCode: ''
    }
  },
  methods: {
    ...mapActions(['reGetCompanyInfo']),
    /**
     * 获取图片验证码
     */
    async getCaptchaImage() {
      let res = await getCaptchaImage()
      let ns = this
      ns.captchaImage = 'data:image/gif;base64,' + res.img
      ns.realCode = res.imgCode
    },
    //取消
    submitForm(ruleForm) {
      this.$confirm('确定取消？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        this.$router.replace({ path: '/company/enterprise' })
        this.$refs[ruleForm].resetFields()
      })
      .catch(() => {})
    },
    //提交
    resetForm(ruleForm) {
      this.$confirm('确定提交？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        this.$refs[ruleForm].validate(async (valid) => {
          if (valid) {
            let data = {
              clueType: this.companyInfo.clueType,
              clueSource: this.companyInfo.clueSource,
              attractInvestmentClueExpand: this.ruleForm,
            }
            // let api = `${host}/company/againAuthentication`
            // let res = await request(this, api, data, 'POST')
            let res = await againAuthentication(data)
            if (res.code == 200) {
              this.reGetCompanyInfo()
              this.$router.replace({ path: '/company/enterprise' })
            } else {
              this.$message.error( res.msg )
            }
          }
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        })
      })
    },
    async _Reverse() {
      let data = {
        clueId: this.login.clueId,
      }
      // let api = `${host}/company/profile/getClueInfo`
      // let res = await request(this, api, data, 'get')
      let res = await getClueInfo(data)
      this.ruleForm = res.data
    },
    async getFormOptions() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`sys_user_sex,legal_representative_type`).then(res => {
        this.DocumentType = res.legal_representative_type
        this.sys_user_sex = res.sys_user_sex
      })
    }
  },
  created() {},
  mounted() {
    this.login = JSON.parse(localStorage.getItem('login'))
    this.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    setTimeout(function () {}, 200)
    this.getFormOptions()
    this.getCaptchaImage()
    this._Reverse()
  },
}
</script>
<style lang="scss" scoped>
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.msgDiv {
  margin: 40px 0;
}
::v-deep .el-input__inner {
  width: 550px;
  display: flex;
}
.cancel {
  width: 120px;
  height: 40px;
  background: #f1f2f4;
  border-radius: 3px;
  color: #045db9;
}
.Submit {
  width: 120px;
  height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
}
.Document {
  ::v-deep .el-form-item__content {
    display: flex;
  }
}
.Gender {
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }
}
.Verification {
  .Verification_Code {
    width: 128px;
    height: 40px;
    background: #f1f2f4;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    color: #045db9;
    .captchaImg {
      width: 128px;
      height: 40px;
    }
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
  ::v-deep .el-input {
    width: 565px;
  }
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
::v-deep .el-message-box {
  width: 340px !important;
  height: 157px !important;
}
::v-deep .el-message-box__btns {
  margin-top: 40px !important;
}
.UnitName {
  display: flex;
  position: relative;
  right: 7px;
  ::v-deep .el-form-item__label {
    width: 107px !important;
    position: absolute;
  }
  ::v-deep .el-form-item__content {
    margin-left: 107px !important;
  }
}
</style>